 <template>
 <div class="login">
    <div class="login-con">
      <el-card icon="log-in" :title="getVersion" :bordered="false">
        <div class="form-con">
          <el-form :model="form" ref="form" :rules="rules">
            <el-form-item prop="userAccount" style="width: 370px">
              <el-input
                clearable
                name="userAccount"
                size="large"
                placeholder="请输入用户名"
                @keyup.enter.native="doSubmit"
                 
                v-model="form.userAccount"
                class="login_el-input"
              >
                <i
                  class="fa fa-user"
                  :style="{ margin: '0 10px' }"
                  aria-hidden="true"
                  slot="prepend"
                ></i>
              </el-input>
            </el-form-item>

            <el-form-item prop="pwd" style="width: 370px">
              <el-input
                clearable
                :type="myEyeFlag"
                name="pwd"
                size="large"
                placeholder="请输入密码"
                @keyup.enter.native="doSubmit"
                 
                v-model="form.pwd"
                class="password_el-input"
              >
                <i
                  class="fa fa-lock"
                  :style="{ margin: '0 10px' }"
                  aria-hidden="true"
                  slot="prepend"
                ></i>
              </el-input>
            </el-form-item>
            <el-form-item style="width: 370px">
              <el-button type="primary" @click="doSubmit()" long :loading="loading" noRepeat
                >登录</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>
 
<div style="text-align: center; color: #999999;position: fixed ; bottom: 30px; width: 100% ">
                    这里是公司名称,联系方式等<br/>
                    Copyright &copy;&nbsp;&nbsp;xxxxx All rights reserved.&nbsp;&nbsp;<a target="_blank" href="http://www.beian.miit.gov.cn/state/outPortal/loginPortal.action">粤ICP备xxxxx号-xxx</a>
                  </div>
  
                  
  </div>
</template>

<script>
import { mapMutations,mapGetters } from "vuex";
export default {
  data() {
    return {
      show: false,
      form: {
        userAccount: null,
        pwd: null,
      },
      rules: {
        userAccount: [
          {
            required: true,
            type: "string",
            message: "请输入用户名",
           trigger: 'blur'
          },
        ],
        pwd: [
          {
            required: true,
            type: "string",
            message: "请输入密码",
           trigger: 'blur'
          },
        ],
      },
      loading: false,
    };
  },
  computed: {
    ...mapGetters({
      getVersion: "app/_getVersion"
    }),
    myEyeFlag: function () {
      if (this.show === false) {
        return "password";
      } else {
        return "text";
      }
    },
  },
  methods: {
    ...mapMutations({}),
    toggleShow() {
      this.show = !this.show;
    }, 
    doSubmit() {
      // const that = this;
      // this.loading = true;
      // that.$refs["form"].validate((valid) => { 
      //   if (!valid) {
      //     that.loading = false;
      //     return;
      //   }
         
      // });
      this.$router.push("/welcome");
    } 
  },
};
</script>
<style lang="less">
.login {
  width: 100%;
  height: 100%;
  background: #434A54; 
  position: relative;
  &-con {
    position: absolute;
    right: 160px;
    top: 50%;
    transform: translateY(-60%);
    width: auto;
    &-header {
      font-size: 16px;
      font-weight: 300;
      text-align: center;
      padding: 30px 0;
    }
    .form-con {
      padding: 10px 0 0;
    }
    .login-tip {
      font-size: 10px;
      text-align: center;
      color: #c3c3c3;
    }
  }
}
</style>